<template>
	
	<div style=" ">
	<div v-show="hasClass && compile" id="appbar-style" style="">
		<mu-appbar :title="dqkc.djj" class="example-appbar flex-appbar" style="position: relative; background-color: #f5f5f5;">
			<section id="top-appbar" >
				<section style="font-size: 1.1rem; color: #343434;flex:1.5;"></section>
				<!--<mu-icon class="list-icon"  value="label" color="blue" style="flex:1" />-->
				<section style="flex: 5;">
					<span class="move-mid" style="color: #343434;">
				    	{{dqkc.djj}}
				    	<mu-icon-menu icon="expand_more" slot="left"  @change="handleChange" :value="index" class="arrow-down" >
					    	<mu-menu-item :value="kcxxIndex" :title="'第'+kcxx.courseWhichIndex+'-'+(parseInt(kcxx.courseWhichIndex)+1)+'节'" v-for="(kcxx,kcxxIndex) in todayCourse"/>
					    </mu-icon-menu>
				    </span>
					
					
				</section>
			    
			</section>
	    	<mu-flat-button v-show="barButton" @click="btnhandleChange" :label="label" slot="right" style="color: #343434;"/>
	 	</mu-appbar>
		
		<section class="card-list" >
			<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="description" color="blue" />
	    		<span>{{dqkc.kcmc}}</span>
	    	</section>
			<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="perm_identity" color="orange700" />
	    		<span>{{dqkc.rkjs}}</span>
	    	</section>
			<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="receipt" color="orange700" />
	    		<span>{{dqkc.sj}}</span>
	    	</section>
	    	<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="event" color="blueGrey500" />
	    		<span>{{dqkc.zc}}</span>
	    	</section>
	    	<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="room" color="green500" />
	    		<span>{{dqkc.dd.length==0?'上课地点另行通知':dqkc.dd}}</span>
	    	</section>
			
		</section>
		
		
		
		<mu-flat-button label="推荐点名" class="demo-flat-button"  v-show="barButton" @click="btnhandleChange" v-if="userIdentity=='Teacher'"/>
		
	</div>
	<div v-show="!compile" class="no_class">
		<mu-circular-progress :size="40" color="green500"/>
		<div>加载中..</div>
	</div>
	<div v-show="compile && unConnect && thirdPara" class="no_class">
		<mu-icon value="report_problem" :size="72" color="orange"/>
		<div>请重新登录或检查网络连接</div>
	</div>
	<div v-show="!hasClass && compile && !unConnect" class="no_class">
		<mu-icon value="report_problem" :size="72" color="orange"/>
		<div>今天您没有课程</div>
	</div>
</div>
</template>
<script>

//import TimeDown from '@/components/time_down'
export default {
	name:'ClassInfo',
	components : {
//      TimeDown
    },
	props:{
		label:{
			type:String
		},
		userIdentity:{
			type:String
		},
		barButton:{
			type:[Object,String]
		}
	}
	,computed:{
		url: function() {
            return '/gleenSoft-base/jxkh/jxrl/dayClassBy'+this.userIdentity;
        },
        isTeacher:function(){
        	return this.userIdentity=='Teacher';
        }
	},mounted(){
 		let that = this;
// 		this.checkNet()
		var n=0
		if(that.compile==false&&that.countTime>=0){
			let timer=setInterval(function(){
				n++
				that.countTime=n
				if(that.countTime>=25){
					clearInterval(timer)
					that.unConnect=true
					that.compile=true
				}
			},1000)
		}
 		this.variousTime()
 		this.loadCoureInfo()
      	
      	
  	},data(){
		return{
			hasClass:false,
			compile:false,
			unConnect:false,
			thirdPara:false,
			dqkc:{
//				sj:'',
				zc:'',
				djj:'',
				dd:'',
				kcmc:'',
				rkjs:''
			},
			mainData:[],
			index:-1,
			allParameters:null,
			disable:true,
			endTime:'2017-04-18T13:06:00',
			startTime:'2017-04-18T13:06:00',
			todayCourse:{},
			currentFullDate:'',
			countTime:0
		}
	},methods:{
		loadCoureInfo(){
  			let that = this
  			//获取当天课程信息
	      	that.axios.get('iyx/course/'+that.currentFullDate+'/'+localStorage.classId+'/ClassDayCourse').then(function (response) {
	        	if(response.data.length>0){
	        		that.todayCourse=response.data
	        		that.index=0;
		        	that.$emit('hasClass',true);
		        	that.hasClass=true;
	        	}else{
	        		that.hasClass=false;
		        	that.$emit('hasClass',false);
	        	}
	        	that.compile=true
	        	that.unConnect=false
	        	that.thirdPara=false
	      	}).catch(function (error) {
	        	console.log(error);
	        	that.thirdPara=true
	      	});
  		},
		variousTime(){
	    	var thisDate=new Date()
			  var currentYear=thisDate.getFullYear()
		  	var mon=this.correcTime(thisDate.getMonth()+1)       
		  	var toDate=this.correcTime(thisDate.getDate())
		  	var currentHour=this.correcTime(thisDate.getHours()) 
		  	var currentMinutes=this.correcTime(thisDate.getMinutes())
		  	
			this.currentmonth=mon+'-'+toDate
		  	this.currentTime=currentHour+':'+currentMinutes
		  	this.currentFullDate=currentYear+'-'+this.currentmonth
	    },
	    correcTime(data){
	    	if(data<10){
	    		data='0'+data
	    	}
	    	return data
	    },
		timeOut(val){
			this.disable=val;
			this.$emit('time-out',val);
		},
		handleChange (val) {
			this.index=val;
	    },
		btnhandleChange(){
			this.$emit('handchange');
		},
		gotoAddress(path){
            this.$router.push(path)
      },
	},watch:{
		index(val){
			//计算课堂结束时间。DJJ+上课长度-1
			//点名的结束时间
//			this.endTime = this.mainData[this.index].SJ.replace(/-/g,'/')+" "+this.allParameters[(parseInt(this.mainData[this.index].DJJ)+parseInt(this.mainData[this.index].SKCD-1))+'_class_end'];
//			//this.endTime = '2017-04-19'+" 17:35:00";
//			this.startTime = this.mainData[this.index].SJ.replace(/-/g,'/')+" "+this.allParameters[this.mainData[this.index].DJJ+'_class_start'];
//			this.$emit('changeXkkh',this.mainData[this.index],this.allParameters);
//			this.$emit('changeXkkh',this.todayCourse[this.index])
			this.$emit('passInfo',this.todayCourse[this.index])
     		this.dqkc = {
	     		sj:this.todayCourse[this.index].currentDate,
	      		zc:'第'+this.todayCourse[this.index].courseWhichWeek+'周,星期'+this.todayCourse[this.index].courseWhichDay,
	      		djj:'第'+this.todayCourse[this.index].courseWhichIndex+'-'+(parseInt(this.todayCourse[this.index].courseWhichIndex)+1)+'节',
	      		dd:this.todayCourse[this.index].courseClassroomPosition,
	      		rkjs:this.todayCourse[this.index].courseTeacherName,
	      		kcmc:this.todayCourse[this.index].courseName
    		} 
		},
//		countTime(newVal,oldVal){
////			if(newVal>=10){
////				clearInterval(this.timer())
////				this.unConnect=true
////				this.compile=true
////			}
//		}
		
	}
}
</script>
<style scoped>
ul,li{
	margin: 0;
}
.no_class{
	padding:150px 0;
	font-size:24px;
	text-align: center;
}
.arrow-down{
	display: block;
	position: absolute !important;
	left:4rem;
	color: #282828;
	height: 2.8rem;
	top: 0;
}
.arrow-down .mu-icon{
	position: relative !important;
	top:-0.2rem;
}
.arrow-down .mu-icon-button{
	height: 2.8rem!important;
}

/*.flex-appbar{
	display: flex;
	justify-content: center;
}

.flex-appbar section:nth-child(1),.flex-appbar section:nth-child(3){
	flex: 1;
}
.flex-appbar section:nth-child(1){
	flex: 4;
}*/
#appbar-style{
	margin-top:3.2rem;
	/*margin-top: 3.2rem;*/
}
#appbar-style .mu-appbar{
	background-color: white;
	height: 2.8rem;
	box-shadow: none;
	
}
.flex-appbar{
}
.move-mid{
	/*width: 5rem;*/
	height: 2.8rem;
	text-align: left;
	line-height: 2.8rem;
	display: block;
	font-size: 1.1rem;
	position: relative;
	/*flex: 5;*/
}
#top-appbar{
	width: 12rem;
	height: 2.8rem;
	position:absolute;
	left: 0;
	top:0; 
	display:flex;
	justify-content: center;
	align-items: center;
}
.back-home{
	width:3.5rem; 
	position: absolute;
	left: 0;
	top: 0; 
	display: flex;
	justify-content: center;
	align-items: center;
}
.card-list{
	/*margin:0 0.5rem 0 0.5rem;*/ 
	border-radius: 2px;
	margin: 0 3.2% 0 3.2%;
}
.class-detail-info{
	width: 100%; 
	height: 2.6rem; 
	display: flex; 
	flex-direction: row; 
	text-indent: 0.2rem;
}
.class-detail-info span{
	display: block;
	color:#1f1f1f ;
	/*color:#818181;*/
	font-size: 1rem ;
	/*width: 100%;*/
	text-align: left;
	height: 2.6rem;
	flex: 5;
	line-height: 2.6rem;
	text-indent: 9px;
}
.list-icon{
	height: 2.6rem;
	line-height: 2.6rem;
	flex: 0.5;
	text-align: left;
}
</style>
	
	
</template>

<script>
</script>

<style>
</style>